{% load static %}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>播放页面</title>
</head>
<body>
	
	
		<audio id="myAudio" controls>
	    <source src="{% static 'songFile/' %}{{ song_info.song_file }}" type="audio/mpeg">
	   	 	Your browser does not support the audio element.
  		</audio>
	<div>
		<h3>歌曲封面</h3>	
		<img src="{% static 'songImg/'%}{{ song_info.song_img }}">
	</div>
	<h3>歌词</h3>
	<textarea>
		{{ song_lyrics }}
	</textarea>
	<h3>歌曲信息</h3>
	<div>
		<span>歌手：{{ song_info.song_singer }}</span>
	</div>
	<div>
		<span>专辑：{{ song_info.song_album }}</span>
	</div>
	<div>
		<span>狱中：{{ song_info.song_languages }}</span>
	</div>
	<div>
		<span>类型：{{ song_info.song_type }}</span>
	</div>
	<div>
		<span>发行时间：{{ song_info.song_release }}</span>

	</div>
	<div>
		<span><a href=" {% url 'music:download' song_info.song_id %}">下载</a></span>
		<span><a href=" {% url 'music:comment' song_info.song_id %}">发布评论</a></span>
	</div>
	<div>
		<ul>
			{% for list in play_list %}
			<li>
				<span>{{forloop.counter}}</span>
				<a href="">{{list.song_name}}</a>

			</li>
			{% endfor %}
		</ul>
	</div>

	</div>

	<h3>相关歌曲</h3>
	<div>
		<ul>

			{% if song_relevant %}
				  {% for item in song_relevant %}
				    <li>
				      {% if item.song.song_id != song_info.song_id %}
				        <a href="">
				          <img src="{% static 'songImg/'%}{{ song_info.song_img }}">
				        </a>
				        <h4><a href="">{{ item.song.song_name }}</a></h4>
				        <a href="">{{ item.song.song_singer}}</a>
				      {% endif %} 
				    </li>
				  {% endfor %}
			{% else %}
				  <li>暂无相关歌曲</li>
			{% endif %}





		</ul>
	</div>
</body>
</html>

 <script>
    var audio = document.getElementById('myAudio');

    // 播放歌曲
    function playSong() {
      audio.play();
    }

    // 暂停歌曲
    function pauseSong() {
      audio.pause();
    }

    // 切换播放/暂停状态
    function togglePlayPause() {
      if (audio.paused) {
        playSong();
      } else {
        pauseSong();
      }
    }
  </script>